<template>
	<view class="priview-box" :style="bgData.bgUrl=='' ? 'background-color:' + bgData.bgColor : 'background: url(' + bgData.bgUrl + ');'" v-show="isShow">
		<view id="phoneListBox" class="middle-box phone-list">
			<view class="banner-box">
				<image :src="bannerImg"></image>
				<view class="buy-tip-txt" :style="'opacity:' + (isShowBuyTip ? 1 : 0) + ';'" v-if="isshow_od == '1'">XXX刚刚购买了XXX</view>
				<view class="parttake-txt-box" 
					:style="'opacity:'+(isShowPatake?1:0)+';color:' + parttakeData.txt.color + '; font-size : ' + parttakeData.txt.size + 'px; text-shadow:-1px 1px 0 '+ parttakeData.txt.borderCol + ', 1px 1px 0 '+parttakeData.txt.borderCol" v-if="is_buynum=='1'">
						<text class="patrt-txt"
							>已有
							<text class="part-num" 
							:style="'color:' + parttakeData.num.color + '; font-size : ' + parttakeData.num.size + 'px; text-shadow:-1px 1px 0 '+ parttakeData.num.borderCol + ', 1px 1px 0 ' + parttakeData.num.borderCol">{{partNum}}</text>
							人参与秒杀
						</text>
				</view>
				
				<view class="active-direction">
					<!-- 活动说明 -->
					<text class="txt">活动说明</text>
				</view>
				<view class="active-direction contact-merchant">
					<!-- 活动说明 -->
					<text class="txt">联系商家</text>
				</view>
				
				<view class="music-btn-box logo-box" :class="{'no-m-logo-pos' : ismusic == 2}" v-if="cpLogoData.cpLogoImg">
					<image class="logo-img" :src="cpLogoData.cpLogoImg"></image>
				</view>
			
				<view class="music-btn-box" v-if="ismusic == 1">
					<image class="music-btn-img logo-img-b-r" :src="musicSrcImgData.imgOnIcon"></image>
				</view>
			</view>
			
			<view class="sessions-tab-box">
				<view class="s-t-box" :style="'left:' + leftAutonum + 'px; color:' + txt.color" :class="sessionsBarArr.length < 3 ? 'the-middle' : ''">
					<view class="tab-b-item"
						v-for="(item,index) in sessionsBarArr" 
						:key="index" 
						:style="curIndex == index ? ('color:'+ txt['color' + item.status] + ';border-bottom:' + txt['color' + item.status] + ' solid 2px;') : ''">
						<view class="t--t-txt">{{item.time_from_str}}</view>
						<view class="t-s-txt">{{item.statusTxt}}</view>
					</view>
				</view>
			</view>
		
			<view class="sessions-box" 
				v-for="(item,index) in sessionsBarArr" 
				:key="index" 
				:id="'sessId'+ item.sess_id">
				<view class="session-time-box">
					<view class="sess-box">
						<view class="list-tit" :style="'color:'+ txt['color' + item.status]">{{item.time_from_str}}{{" " + item.statusTxt}}</view>
						<view class="a-time-box" v-if="item.status != 2" :style="item.status == 0 ? 'color:'+ txt.color0 +';' : 'color:'+txt.color1">
							<text class="a-t-txt" v-if="item.status == 0">距开始还有{{item.dd}}天</text>
							<text class="a-t-txt" v-if="item.status == 1">距结束还有{{item.dd}}天</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.hh}}</text>
							<text class="t-txt-dd">:</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.mm}}</text>
							<text class="t-txt-dd">:</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.ss}}</text>
						</view>
					</view>
				</view>
				
				<view class="gd-list-box" v-for="(gdItem,idx) in item.gd_list" :key="idx">
					<image class="gd-img" :src="gdItem.gd_img"></image>
					<view class="info-box">
						<view class="gd-info">
							<view class="g-tit-txt">{{gdItem.gdname}}</view>
							<view class="g-p-txt"><text class="cur-px">￥</text>{{gdItem.price}}</view>
							<view class="g-pc-txt">原价{{" ￥" + gdItem.price0}}</view>
						</view>
						<view class="gd-per-btn">
							<image class="btn-img" :src="buyBtn.imgBtn" v-if="item.status == 1"></image> 
							<view class="per-box">
								<view class="g-per-txt" :class="{'never-start':item.status == 0}  ">
									{{item.status == 0 ? "敬请期待" : ''}}
									{{item.status == 1 ? gdItem.r : ''}}
									{{item.status == 2 ? "已结束" : ''}}
								</view>
								<view class="g-per-box" v-if="item.status == 1">
									<view class="g-per-bar" :style="'width:'+gdItem.r_number+'%;background-color:'+ item.txtColor +';'"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="follow-box">
				<view class="f-btn" :style="'color:'+follow.color+';background-color:'+follow.bgColor">
					{{followBtnTxt}}
				</view>
			</view>
		</view>
		
		<view class="foot-box">
			<view class="tab-bar-box">
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/icon-home-page-s-1.png"></image>
					</view>
					<view class="t-b-t s-txt">
						<text>首页</text>
					</view>
				</view>
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/menu04.png"></image>
					</view>
					<view class="t-b-t">
						<text>订单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let timeout = null;
	let timer = null;
	export default {
		props: [],
		components: {},
		computed: {},
		data() {
			return {
				isShow:false,
				partNum:15,
				
				bannerImg:"",
				
				followBtnTxt:"",
				//背景
				bgData: {
					bgColor: "#DFDFDF", //背景颜色
					bgUrl: "", //绝对路径
					baseUrl: "", //相对路径
				},
				
				//活动字体颜色
				txt: {
					color : "#999", //滚动字体颜色
				    color0: "#FF6600", //活动未开始字体颜色
				    color1: "#F04848", //活动进行中字体颜色
				    color2: "#AAA", //活动已结束字体颜色
				},
				
				//背景音乐
				musicSrcImgData: {
					imgOnIcon:"", //C端b播放音乐状态图片
					baseImgOnIcon: "",
					imgImgOffIcon:"", //C端关闭音乐状态图片
					baseImgOffIcon: "",
					left: 0, //x坐标
					top: 0, //y坐标
				},
				
				cpLogoData:{
					cpLogoImg:"https://pc.imiyun.com/static/images/logo.png",
					left:0,
					top:0,
				},
				isShowBuyTip:true,//是否显示  ‘XXX刚刚购买了XXX’
				isShowPatake:true,//是否显示 ‘已有0人参与秒杀’
				parttakeData: //参与人数文字
				{
					txt:{ //文本样式
						color:"#F04848",//文字颜色
						size:12,//字体大小
						borderCol:"#FFF",
					},
					num:
					{
						color:"#3388FF",//文字颜色
						size:12,//字体大小
						borderCol:"#FFF",
					}
				},
				
				// 关注我们
				follow: {
					color: "#FFF", //字体颜色
					bgColor: "#3388FF", //背景颜色
				},
				
		
				//抢购按钮
				buyBtn: {
					imgBtn: "https://cdn.imiyun.com/static/aisou/xcx/icon/icon-mh-gd.png", //绝对路径
					baseImgBtn: "static/aisou/xcx/icon/icon-mh-gd.png", //相对路径
					imgFinishBtn:"https://cdn.imiyun.com/static/aisou/xcx/icon/icon-mh-gd.png", //绝对路径
					baseImgFinishBtn:"static/aisou/xcx/icon/icon-mh-gd.png", //相对路径
				},
				
				sessionsBarArr:[],
				curIndex:0,
				
				base:125,
				leftAutonum: 0,
				isStopLeftNum:true,
				speed: 100, //产品左右滚动的速度（毫秒）
				isWait:true,
				waitNum:0,
				
				ismusic:2,
				isshow_od:2,
				is_buynum:2,
			};
		},
		created() {},
		mounted() {
			
		},
		methods: {
			updateSkin(data)
			{
				this.parttakeData = data.parttakeData;
				this.activeDesc = data.activeDesc;
				this.bgData = data.bgData;
				this.cpLogoData = data.cpLogoData;
				this.follow = data.follow;
				this.musicSrcImgData = data.musicSrcImgData;
				this.txt = data.txt;
				this.buyBtn = data.buyBtn;
			},
			
			onSessMouseOver()
			{
				this.isStopLeftNum = false;
			},
			
			onSessMouseOut()
			{
				this.isStopLeftNum = true;
			},
			
			// 产品自动滚动
			sollAutoFun(){
				this.$nextTick(()=>{
					timer = setInterval(()=>{
						if(this.isStopLeftNum )
						{
							if(!this.isWait)
							{
								this.leftAutonum -= 3;
								let num = this.leftAutonum;
								let templeft = this.sessionsBarArr.length * this.base - this.base * 3;
								if(num <= -templeft)
								{
									this.isWait = true;
								}
							}
							else
							{
								this.waitNum ++;
								if(this.waitNum >= 30) //等待3秒
								{
									this.isWait = false;
									this.leftAutonum = 0;
									this.waitNum = 0
								}
							}
						}
					},this.speed)
				})
			},
			
			initData(data)
			{
				if(data)
				{
					if(data.hd_set)
					{
						this.cpLogoData.cpLogoImg = data.hd_set.logo_url;
						this.isshow_od = data.hd_set.isshow_od;
						this.is_buynum = data.hd_set.is_buynum;
						this.ismusic = data.hd_set.ismusic;
						if(data.hd_set.set_skin)
						{
							if(data.hd_set.set_skin.homePage)
							{
								this.updateSkin(data.hd_set.set_skin.homePage);
							}
						}
						
						if(data.hd_set.set_advc)
						{
							if(data.hd_set.set_advc.bttn_main)
							{
								let type = data.hd_set.set_advc.bttn_main.type;
								if(data.hd_set.set_advc.bttn_main["type_"+type])
									this.followBtnTxt = data.hd_set.set_advc.bttn_main["type_"+type].bttname;
								else 
									this.followBtnTxt = "";
							}
					
						}
					}
					
					if(data.hd_info)
					{
						this.bannerImg = data.hd_info.img_url;
					}
					
					if(data.chp_ls)
					{
						this.sessionsBarArr = data.chp_ls;
						this.sessionsBarArr.forEach(s=>{
							s.dd = Math.floor(s.left_time / (3600*24));
							let hh = Math.floor((s.left_time % (3600*24)) / 3600);
							s.hh = hh > 9 ? hh : "0" + hh; 
							let mm = Math.floor((s.left_time - s.dd * 3600 * 24 - s.hh * 3600) / 60);
							s.mm =  mm > 9 ? mm : "0" + mm; 
							let ss = s.left_time % 60
							s.ss = ss > 9 ? ss : "0" + ss; 
							if(s.gd_list)
							{
								s.gd_list.forEach(c=>{
									if(c.img_url)
									{
										c.gd_img = c.img_url[0];
										if(s.status == 1)
										{
											c.btn_img = this.buyBtn.imgBtn;
											if(s.r_number==100)
												c.btn_img = this.buyBtn.imgFinishBtn;
										}
									}
								})
							}
						})
					}
					
					this.isShow = true;
				}
				
				if(this.sessionsBarArr.length > 3 && !timer)
				{
					this.leftAutonum = 0;
					this.sollAutoFun();
				}
			},
		},
	};
</script>

<style lang="scss" scoped >
.priview-box {
    width: 100%;
    height: 100%;
	overflow: hidden;
	position: relative;
	background-size: contain;
	background-repeat: repeat-y;
	.statuts-bar-box
	{
		height: 176upx;
		width: 100%;
		background-color: #FFF;
		position: relative;
		.s-b-b
		{
			display: flex;
			justify-content: space-between;
			padding: 38upx 20upx;
			.time-txt
			{
				
			}
			.pw-per-box
			{
				color: #AAA;
				display: flex;
				align-items: center;
				view
				{
					padding-right: 10upx;
				}
				image
				{
					width: 52upx;
					height: 20upx;
				}
			}
		}
		.tit-txt
		{
			text-align: center;
		}
	}
	
	.middle-box
	{
		width: 100%;
		// background-color: #FFF;
		height:calc(100% - 120upx) ;
		.banner-box
		{
			width: 100%;
			position: relative;
			height: 480upx;
			image
			{
				width: 100%;
				height: 100%;
			}
			
			.banner-box-line
			{
				width: calc(100% - 4upx); //100%;
				height: 100%;
				border: 1px #000 dashed;
				position: absolute;
				top: 0;
				left: 0;
				pointer-events: none;
				z-index: 1000;
			}
			
			.banner-img-box
			{
				position: absolute;
				top: 5px;
				left: 5px;
				width:40px;
				height: 40px;
				z-index: 1000;
				.edit-img
				{
					width:40px;
					height: 40px;
				}
	
			}
			.edit-img-music {
				top: -8px;
				left: 47px;
			}
			.banner-txt
			{
				background-color: #000;
				color: #FFF;
				position: absolute;
				left: 5px;
				top: 50px;
				text-align: center;
				border-radius: 4px;
				padding: 1px 8px;
				z-index: 1000
			}
			
			.buy-tip-txt
			{
				position: absolute;
				background-color: #FFF;
				color: #FF6600;
				padding: 2upx 20upx;
				border-radius: 30upx;
				bottom: 140upx;
				left: 20upx;
			}
			
			.buy-tip-txt-line
			{
				width: calc(100% - 10px); //100%;
				height: 30px;
				border: 1px #000 dashed;
				position: absolute;
				bottom:65px;
				left: 0;
				right: 0;
				margin: auto;
				pointer-events: none;
			}
			
			
			.parttake-txt-box
			{
				position: absolute;
				opacity: 1;
				bottom: 15px;
				width: 100%;
				text-align: center;
				margin: 0 auto;
				 
				.patrt-txt
				{
					.part-num
					{
						
					}
				}
			}
			
			.parttake-txt-line
			{
				width: calc(100% - 10px); //100%;
				height: 30px;
				border: 1px #000 dashed;
				position: absolute;
				bottom:10px;
				left: 0;
				right: 0;
				margin: auto;
				pointer-events: none;
			}
			.partt-txt-box
			{
				position: absolute;
				bottom:44px;
				right: 10px;
				background-color: #000;
				color: #FFF;
				padding: 2px 10px;
				border-radius: 4px;
			}
			
			.music-btn-box
			{
				position: absolute;
				width: 66upx;
				height: 66upx;
				top:10px;
				left: 9px;
				z-index: 999;
				.music-btn-img,.logo-img
				{
					width: 100%;
					height: 100%;
					transform: scale(.9);
					border-radius: 80upx;
				}
				
				.logo-img-b-r
				{
					border-radius: 0 !important;
				}
				
				.m-b-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -14upx;
					left:-14upx;
					pointer-events: none;
				}
			}
			
			.no-m-logo-pos
			{
				top: 12px !important;
			}
			
			.logo-box	
			{
				top:60px;
				width: 96upx;
				height: 96upx;
				left: 5px;
				.l-b-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -8upx;
					right: -6upx;
					pointer-events: none;
				}
			}
	
			.active-direction
			{
				right: 20upx;
				top: 30upx;
				height: 46upx;
				width: 46upx;
				background-color: #FFF;
				position: absolute;
				text-align: center;
				color: #FF6600;
				padding: 20upx 20upx;
				border-radius: 56upx;
				.txt
				{
					position: absolute;
					top:14upx;
					left: 14upx;
					width: 60upx;
					line-height: 30upx;
				}
				.a-d-line,.c-m-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -14upx;
					right: -10upx;
					z-index: 999;
					pointer-events: none;
				}
			}
			
			
			.contact-merchant
			{
				top: 130upx;
				color: #3388FF;
			}
		}
		
		.sessions-tab-box
		{
			background-color: #FFF;
			border-bottom: 1upx solid #EEE;
			overflow: hidden;
			position: relative;
			height: 130upx;
			padding: 0 20upx;
			.s-t-box
			{
				display: flex;
				position: absolute;
				padding: 20upx ;
				&.the-middle{
					width: 100%;
					display: flex;
					justify-content: space-around;
					.good-row{
						&:last-child{
							margin: 0;
						}
					}
				}
				.tab-b-item
				{
					margin: 0 30upx;
					text-align: center;
					width: 210upx;
				}
			}
		}
		
		.sessions-box
		{
			margin: 20upx 0;
			border-top: 1upx solid #EEE;
			position: relative;
			.txt-style-box
			{
				padding: 4upx 20upx;
				position: absolute;
				right: 20upx;
				top: -20upx;
				border-radius: 8upx;
				color:#FFF;
				background-color: #000;
			}
			
			.sess-box
			{
				border-bottom: 1upx solid #EEE;
				background-color: #FFF;
				.list-tit
				{
					font-size: 36upx;
					font-weight: bold;
					text-align: center;
					color: #f04848;
					height: 80upx;
					line-height: 80upx;
				}
				.a-time-box
				{
					font-size: 32upx;
					height: 70upx;
					line-height: 70upx;
					color: #f04848;
					text-align: center;
					padding: 0 0 10px 0;
					.a-t-txt,.t-txt-dd
					{
						padding: 0 10upx;
					}
					.t-hms-txt
					{
						padding: 10upx 10upx;
						border-radius: 6upx;
					}
				}
			}

			.gd-list-box
			{
				display: flex;
				padding: 20upx 20upx;
				background: #FFF;
				border-bottom: 1upx solid #EEE;
				position: relative;
				.e-img-box
				{
					position: absolute;
					top: -30px;
					left: 10px;
					width:40px;
					height: 40px;
					.edit-img
					{
						width:40px;
						height: 40px;
					}
					.gd-line
					{
						position: absolute;
						height: 92px;
						width: 92px;
						border: 1px #000 dashed;
						top:39px;
						left: -1px;
					}
					
				}
				.move-box
				{
					position: absolute;
					top:-26px;
					right: 10px;
					background-color: #000;
					color: #FFF;
					padding: 2px 10px;
					border-radius: 4px;
				}
				
				.buy-b-box
				{
					position: absolute;
					position: absolute;
					top: 3px;
					right: 10px;
					width:40px;
					height: 40px;
					.edit-img
					{
						width:40px;
						height: 40px;
					}
					.gd-line
					{
						position: absolute;
						height: 35px;
						width: 75px;
						border: 1px #000 dashed;
						top:43px;
						border-radius: 4px;
						right:0;
					}
				}
				
				
				.gd-img
				{
					min-width: 184upx;
					height: 184upx;
					width: 184upx;
					border-radius: 6upx;
				}
				.info-box
				{
					width: calc(100% - 204upx);
					padding-left: 20upx;
					display: flex;
					justify-content: space-between;
					position: relative;
					.gd-info
					{
						width: 100%;
						.g-tit-txt
						{
							font-size: 40upx;
							width:100%;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
						}
						.g-p-txt
						{
							font-size: 36upx;
							color:#f04848;
							font-weight: bold;
							.cur-px
							{
								font-size: 24upx;
							}
						}
						.g-pc-txt
						{
							text-decoration: line-through;
							color: #AAA;
						}
					}
					
					.gd-per-btn
					{
						position: absolute;
						right: 0;
						bottom: 0;
						.btn-img
						{
							position: absolute;
							right: 0;
							bottom: 40upx;
							height: 72upx;
							width: 152upx;
						}
						.per-box
						{
							display: flex;
							justify-content: center;
							align-items: center;
							color: #AAA;
							.g-per-txt{
								padding-right: 20upx;
							}
							
							.never-start
							{
								color: #FF6600;
							}
							
							.g-per-box
							{
								width: 152upx;
								height: 16upx;
								background-color: #EEE;
								.g-per-bar
								{
									height: 100%;
								}
							}
						}
					}
				}
			}
			
			// .gd-item:hover
			// {
			// 	border: 1px #000 dashed;
			// }
		}
		
		.follow-box
		{
			margin: 20upx;
			position: relative;
			.f-btn
			{
				font-size: 36upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 50upx;
				margin: 0 100upx;
			}
		}
		.f-line
		{
			border: 1upx #000 dashed;
			height: 80upx;
			margin: 0 100upx;
			border-radius: 50upx;
			position: absolute;
			width: 254px;
			top: -1px;
		}
		.f-e-box
		{
			background-color: #000;
			border-radius: 8upx;
			color: #FFF;
			padding: 2upx 20upx;
			width: 240upx;
			position: absolute;
			right: 70px;
			top:-25px;
		}
	}
	
	.g-txt
	{
		padding: 0 10px;
	}
	
	.foot-box
	{
		height: 120upx;
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: #FFF;
		border-top: 1upx solid #eee;
		.tab-bar-box
		{
			height: 100upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			
			.tab-b
			{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				.t-b-i
				{
					height: 60upx;
					width: 60upx;
					position: relative;
					image
					{
						height: 100%;
						width: 100%;
					}
				}
				.t-b-t
				{
					height: 24upx;
					color: #666;
				}
				.s-txt
				{
					color: #3388FF;
				}
			}
		}
	}
	
	.main-box-line
	{
		width: calc(100% - 2px);
		position: absolute;
		top: 88px;
		height: calc(100% - 150px);
		pointer-events: none;
		border: 1px dashed #000;
	}
	
	.main-set-box
	{
		position: absolute;
		top:60px;
		right: 10px;
		background-color: #000;
		color: #FFF;
		padding: 2px 10px;
		border-radius: 4px;
	}
}
</style>
